import React from "react";
import { NavBar, Space, Toast, Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { UserCircleO } from "@react-vant/icons";
import { RightOutline } from "antd-mobile-icons";
import dataImg from '../icon/修改.png'
type Props = {};

const Passenger = (props: Props) => {

  const navigate = useNavigate();
  const back = () => {
    Toast.show({
      content: "点击了返回区域",
      duration: 1000,
    });
    navigate("/index/class");
  };
  return (
    <div className="passengerBox">
      <div className="passengerBoxTop">
        <NavBar onBack={back} style={{ color: "white" }}>
          乘客列表
        </NavBar>
        <div className="passengerTel">
          <p style={{marginTop:"8px"}}>
            <span style={{ fontSize: "40px", color: "#FFF" }}>
              <UserCircleO />
            </span>
            <b
              style={{
                float: "right",
                lineHeight: "43px",
                fontSize: "18px",
                marginLeft: "20px",
                color: "#FFF",
              }}
            >
              13064826532
            </b>
          </p>
          <p>
            <span
              style={{
                fontSize: "15px",
                color: "#fff",
                float: "left",
                lineHeight: "43px",
              }}
            >
              切换账号 
            </span>
            <span
              style={{
                fontSize: "25px",
                color: "#eee",
                float: "right",
                lineHeight: "43px",
                marginLeft:"5px"
              }}
            >
              {">"}
            </span>
          </p>
        </div>
      </div>
      <div className="passengerBtn">
          新增乘客
      </div>
       
       <div className="passengerConent">
         <div className="passengerConent1">
           下拉刷新列表
         </div>
         <div className="passengerConent2">
          <p className="ConentP1">
            <img src= {dataImg} alt="" style={{width:"20px",height:"20px"}} />
          </p>
          <p className="ConentP2">
            <dl>
              <dt>
                <span className="sp1">王一默</span>
                <span className="sp2">
                   <span>成人票</span>
                  </span>
              </dt>
              <dd>身份证111111111111111</dd>
            </dl>
          </p>
          <p className="ConentP3">
             <input type="checkbox" />
          </p>
         </div>
         <div className="passengerConent2">
          <p className="ConentP1">
            <img src= {dataImg} alt="" style={{width:"20px",height:"20px"}} />
          </p>
          <p className="ConentP2">
            <dl>
              <dt>
                <span className="sp1">王一一</span>
                <span className="sp2">
                   <span>成人票</span>
                  </span>
              </dt>
              <dd>身份证111111111111111</dd>
            </dl>
          </p>
          <p className="ConentP3">
             <input type="checkbox" />
          </p>
         </div>
        
       </div>
     <div className="passengerFoot">
         确定
     </div>
      
    </div>
  );
};

export default Passenger;
